<template>
	<view class="">
		<view class="select-box"><sun-dropDown style="width: 90%;" v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown></view>
		<view class="query-box f-row-Hcenter f-row-between">
			<view class="input-box f-row-Hcenter f-row-between">
				<input type="text" v-model="query.bar_no" placeholder="请输入货号/条码/商品名称" />
				<view class="query-block f-row-Hcenter" @click="onQuery">
					<view class="query icons iconchazhaochaxun">
					</view>
				</view>
			</view>
			<view class="Qrcode icons iconsaomiao" @click="onQrcode"></view>
		</view>
		<view class="tietle-box"><sun-tietleBox :tietleData="'商品库存'" :showLine="false"></sun-tietleBox></view>
		<view  :id="idTopHeight" class="table-box f-row-Wcenter" :style="{padding:0 +' '+tableMargin +'rpx'}">
				<scroll-view
					:scroll-y="true"
					class="scroll-Y" :style="{maxHeight: topHeight+'rpx'}"
					@scrolltolower="lower"
				>
					<view class="listitem" v-for="(item, index) in resData.list" :key="index" @click="toPage(item)">
						<view class="top f-row-between f-row-Hcenter">
							<view class=" f-column">
								<view class="line f-row-Hcenter">
									{{ item.item_name }}
								</view>
								<view class="line f-row-Hcenter">
									{{ item.item_barcode }}
								</view>
							</view>
							
						</view>
						<view class="bottom f-row-between f-row-Hcenter">
							<view class=" f-column">
								<view class="line f-row-Hcenter">
									<label>库存数量：</label>
									<label>{{ item.stock_qty  }}</label>
								</view>
								<view class="line f-row-Hcenter">
									<label>库存均价：</label>
									<label>{{ item.cost_prc | toFIex}}</label>
								</view>
							</view>
							<view class=" f-column">
								<view class="line f-row-Hcenter">
									<label>零售价：</label>
									<label>{{ item.pos_prc | toFIex }}</label>
								</view>
								<view class="line f-row-Hcenter">
									<label>库存金额：</label>
									<label>{{ item.cost_amt | toFIex }}</label>
								</view>
							</view>
						</view>
					</view>
					<view class="toastTitle">{{ query.toastTitle }}</view>
				</scroll-view>
			
		</view>
	</view>
</template>

<script>
import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
export default {
	components: {
		sunDropDown,
		sunTietleBox
	},
	data() {
		return {
			//列表高度
			idTopHeight: 'table-box',
			tableMargin: 20,
			topHeight: 100,
			
			resData : {},
			//查询
			query: {
				branch_jg: '%', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				bar_no  : '', //varchar(30) 条码/货号/品名 默认传%，也可以不传 
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count
				
				pageindex: 1, // 是 int 页号
				pagesize: 9, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
				toastTitle: '',
				totalPage: 1 //总页码(前端算)
			}
		};
	},
	methods: {
		onQuery(){
			this.getlogin();
		},
		onQrcode(){
			// 允许从相机和相册扫码
			uni.scanCode({
			    success:  (res) => {
					this.query.bar_no = res.result;
					this.getlogin();
			    }
			});
		},
		//选择分店
		onSubmitAddress(e) {
			this.query.branch_jg = e.address.branch_no;
			this.query.branch_name = e.address.branch_name;
			this.getlogin();
		},
		onSubmitDate(e) {
			this.query = { ...this.query, ...e };
			this.getlogin();
		},
		getlogin(isMore) {
			if (this.query.branch_jg == '') {
				this.query.branch_name = this.userInfo.branch_name;
				this.query.branch_jg = this.userInfo.branch_default;
			}
			
			let query = this.query;
			this.$api_server.dwzy_GetAppStockAnalysisList({
				data: query,
				success: res => {
					if (res.data) {
						//收银合计
						let query = this.query;
						let appstockrec = res.data.data.appstockrec;
						for (let key in this.resData.appstockrec) {
							if (appstockrec[key]) {
								this.resData.appstockrec[key] = { ...this.resData.appstockrec[key], ...this.$util.moneyUnit(appstockrec[key]) };
							}
						}
						if (this.query.pageindex == 1) {
							this.resData.list = res.data.data.appstocklist;
						} else {
							this.resData.list = [...this.resData.list, ...res.data.data.appstocklist];
						}
						this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
			
						let listlength = this.resData.list.length;
						let totalCount = appstockrec.rec_tot;
						this.query.totalPage = Math.ceil(totalCount / this.query.pagesize);
						if (isMore) {
							if (listlength > 0) {
								if (listlength <= totalCount) {
									this.query.toastTitle = '没有更多了!';
								} else {
									this.query.toastTitle = '加载更多...';
								}
							} else {
								this.query.toastTitle = '没有更多了!';
							}
						} else {
							if (listlength <= totalCount) {
								this.query.toastTitle = '没有更多了!';
							}
						}
						 this.query = query ;
					}
				},
				fail(error) {
					console.log('rerror>>>', error);
				}
			});
		},
		// 下拉刷新
		lower: function(e) {
			this.query.pageindex++;
			if (this.query.pageindex > this.query.totalPage) {
				return;
			}
			this.query.toastTitle = '加载中...';
		
			this.getlogin('more');
		},
		toPage(item){
			item ={item,query:this.query};
			uni.navigateTo({
				url:'/pages/store/storeDet?data=' + JSON.stringify(item)
			});
		}
	}
};
</script>

<style scoped lang="scss">
.select-box {
	margin: 0 20upx;
}
.query-box {
	margin: 0 20upx;

	.input-box {
		background: rgba(255, 255, 255, 1);
		border-radius: 100upx;
		height: 65upx;
		width: 100%;
		input {
			margin:  0 20upx;
			width: 100%;
		}

		.query {
			margin-right: 20upx;
			font-size: 35upx;
			font-weight: 600;
			color: rgba(118, 118, 118, 1.0);
		}
		
	}
	.Qrcode {
		margin-left: 20upx;
		font-size: 55upx;
		
	}
	
}
.tietle-box{
	margin:  0 20upx;
}
.table-box {
		.scroll-Y {
			.listitem {
				padding: 20upx;
				margin: 10upx 0;
				border-radius: 15upx;
				background: rgba(255, 255, 255, 1);
				
				.bottom {
					margin-top: 10upx;
					padding-top: 10upx;
					border-top: 1px solid rgba(225, 225, 225, 0.9);
					
				}
			}
		}
	
}
.toastTitle {
	width: 100%;
	text-align: center;
	color: rgba(216, 216, 216, 0.9);
}
</style>
